1.Grid settings(上)

Susy1到Susy2又是一個可怕的里程碑，
原本覺得Susy1已經很強大了，
但在Susy2面前，Susy1就像是玩具一樣，
首先我們就先從他的變數設定來一一說起吧，
##youtube影片教學

##範例程式碼

##環境建置

Sass 3.3以上
Compass
Breakpoint
如果你不想安裝ruby環境，Fire.app可以直接撰寫Sass與Susy2

##Susy2 settings 在看Susy2的變數設定前，我們再回頭看一下susy1的設定：

@import "susy";
@import "susyone";
$total-columns : 12;    // 欄數
$column-width  : 60px;  // 欄寬
$gutter-width  : 20px;  // 欄與欄之間的距離
$grid-padding  : $gutter-width/2; // grid左右邊的外邊界
.container{
  @include container    // max-width: 940px; padding-left: 10px;padding-right: 10px;
}

在以前用susy1設計grid的時候，輸入變數後，使用他的container mixin就會自動幫你加總他的寬度。欄與欄之間則是用margin-right來推gutter。

官網介紹的Susy2簡易版設定如下：

$susy: (
  columns: 12,
  gutters: 1/4,
  math: fluid,
  output: float,
  gutter-position: inside,
);

columns與gutters在susy1就已經有其概念了，這裡我主要先要來講gutter-position的屬性，這設定會關係到gutter的設定， ###gutter-position的各種功能

before：推左邊界(margin-left)
after ：推右邊界，同susy1(margin-right)
split ：左右邊界推gutter的一半，同960grid
inside：推欄的左右內距(padding-left、padding-right)
inside-static ：用inside會用%來推padding，這則是以單位來推，例：px、em，看你的column-width是用什麼單位

透過gutter-position，我們就能依照自己的開發習慣，來編譯出自己開發習慣的gutter出來。

###如何設計你要的Grid總寬度

你可直接在css上面寫.wrap{ @include container(960px) }
或者是透過變數自動編譯為：

$susy: (
    columns: 12,
    gutters: 1/3,      //只能用幾分之幾，不能用單位
    column-width:60px, //預設是false，但要透過Susy2自動計算出總寬此變數必加
    math: fluid,       //使用fluid的話，所有編譯出來的單位都是%，但使用[static]再配合column-width則就會變成px、em
    output: float,
    gutter-position: after,
);
.wrap{
    @include container;
}